<template>
  <div class="container">
    <div class="basepadding">自助下单处理系统</div>

    <div class="basepadding" style="display: flex">
      <el-button class="bigbtn" type="primary" @click="pagefn(0)">
        待处理
      </el-button>
      <el-button class="bigbtn" type="primary" @click="pagefn(1)">
        待发货
      </el-button>
      <el-button class="bigbtn" type="primary" @click="pagefn(2)">
        已发货
      </el-button>
      <el-button class="bigbtn" type="primary" @click="pagefn(3)">
        已完成
      </el-button>
    </div>
    <div class="basepadding">{{ pagetitle }}</div>
    <div class="basepadding">
      <ztable
        ref="tablez"
        v-loading="tableloading"
        :datas="tabledatas"
        :tablecolumn="tablecolumn"
      >
        <template #setting="setting">
          <el-table-column
            align="center"
            :label="setting.itemdata.label"
            :prop="setting.itemdata.value"
          >
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="shopuserwpgmedtfn(scope.row)"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </template>
      </ztable>
    </div>

    <shopuserwpgmedt ref="shopuserwpgmedt" />
  </div>
</template>
<script>
  import shopuserwpgmedt from './components/ShopUserwpgmedt.vue'
  import ztable from '@/components/zTable'
  export default {
    components: {
      shopuserwpgmedt,
      ztable,
    },
    setup() {},
    data() {
      return {
        tablecolumn: [
          { label: '日期', value: 'sjc' },
          { label: '订单类型', value: 'ddtype' },
          { label: '订单数量', value: 'ddsl' },
          { label: '联系人姓名', value: 'uxm' },
          { label: '联系人电话', value: 'utel' },
          { label: '详情', value: 'setting' },
        ],
        tableloading: false,
        ShopUserwpgms: [],
        ShopUserwps: [],
        tabledatas: [],
        ztselect: {
          0: '待处理',
          1: '待发货',
          2: '已发货',
          3: '已完成',
        },
        pagetitle: '',
        page: '',
      }
    },
    computed: {
      ShopUserwpgms0() {
        return this.ShopUserwpgms.filter(function (e) {
          return e.b_zt == 0
        })
      },
      ShopUserwpgms1() {
        return this.ShopUserwpgms.filter(function (e) {
          return e.b_zt == 1
        })
      },
      ShopUserwpgms2() {
        return this.ShopUserwpgms.filter(function (e) {
          return e.b_zt == 2
        })
      },
      ShopUserwpgms3() {
        return this.ShopUserwpgms.filter(function (e) {
          return e.b_zt == 3 || e.b_zt == 4
        })
      },
    },
    mounted() {
      this.getdata()
    },
    methods: {
      async getdata(zt = 0) {
        let { data } = await this.$z.$axios.post('/ShopUserwpgm', {
          uUserop: this.$store.state.user.USearch.uUser,
        })
        await this.getShopUserwp()
        this.ShopUserwpgms = data.reverse()
        let reqs = []
        this.ShopUserwpgms.forEach((e) => {
          reqs.push(
            this.$z.$axios.post('/ShopUserwpgmDetailed', { ddh: e.ddh })
          )
        })
        let reqdata = await Promise.all(reqs)
        let ShopUserwpselect = {}
        this.ShopUserwps.forEach((e) => {
          ShopUserwpselect[e.id] = e
        })
        this.ShopUserwpgms.forEach((e, i) => {
          e.ddxq = reqdata[i].data.map((me) => {
            let ShopUserwpdata = ShopUserwpselect[me.id]
            return {
              ShopUserwpgmDetailed: me,
              ShopUserwp: ShopUserwpdata || {},
            }
          })
          e.ddtype = e.ddxq.length == 1 ? e.ddxq[0].ShopUserwp.mc : '合并订单'
          let num = 0
          e.ddxq.forEach(function (e) {
            num = Number(num) + Number(e.ShopUserwpgmDetailed.sl)
          })
          e.ddsl = num
        })
        this.pagefn(zt)
      },
      pagefn(zt = 0) {
        this.page = zt
        this.pagetitle = this.ztselect[zt]
        if (zt == 0) {
          this.tabledatas = this.$z.deepClone(this.ShopUserwpgms0)
        } else if (zt == 1) {
          this.tabledatas = this.$z.deepClone(this.ShopUserwpgms1)
        } else if (zt == 2) {
          this.tabledatas = this.$z.deepClone(this.ShopUserwpgms2)
        } else if (zt == 3) {
          this.tabledatas = this.$z.deepClone(this.ShopUserwpgms3)
        }
      },
      async getShopUserwp() {
        let { data } = await this.$z.$axios.post('/ShopUserwp')
        this.ShopUserwps = data.map(function (e) {
          let ggs = []
          for (var i = 1; i <= 10; i++) {
            if (e[`gg${i}`] && e[`gg${i}`] != '') {
              ggs.push(e[`gg${i}`])
            }
          }
          return { ...e, ggs, ggsstr: ggs.join() }
        })
        return
      },
      shopuserwpgmedtfn(data) {
        this.$refs.shopuserwpgmedt.show(data, () => {
          this.getdata(this.page)
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/tablecss.scss';
  .bigbtn {
    height: 70px;
    padding: 0 60px;
    font-size: 28px;
    margin-right: 60px;
  }
</style>
